<template>
    <div class = "helpBox">
        <nav>
            问题类型
        </nav>
        <!-- 一些小问题 -->
        <aside>
            <router-link 
                :to="{name:'helpPage'}"
                tag="article"
            >
                <p>非人类操作</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
            <router-link 
                :to="{name:'helpPage'}"
                tag="article"
            >
                <p>好友添加</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
            <router-link 
                :to="{name:'helpPage'}"
                tag="article"
            >
                <p>收发信息</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
        </aside>
        <!-- 假数据 -->
        <aside>
           <router-link 
                :to="{name:'helpPage'}"
                tag="article"
            >
                <p>群聊</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
            <router-link 
                :to="{name:'helpPage'}"
                tag="article"
            >
                <p>朋友圈发布异常问题</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
            <router-link 
                :to="{name:'friend'}"
                tag="article"
            >
                <p>朋友圈</p>
                <div class = "icon">
                    <img src="@/assets/images/right.png" alt="">
                </div>
            </router-link>
        </aside>
    </div>
</template>

<script>
export default {
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        }
    },
}
</script>

<style lang="scss" scoped>
    .helpBox{
        width:100%;
        .van-hairline--bottom{
            background:blue;
            .van-icon-arrow-left{
                font-size:16px;
                font-weight:600;
                color:#fff;
            }
            .van-ellipsis{
                color:#fff;
            }
        }
        // 头部

        nav{
            height:50px;
            width:100%;
            font-size:14px;
            text-align: left;
            line-height:50px;
            color:#747474;
            font-weight:500;
            padding-left:10px;
        }
        // 问题
        aside{
            width:100%;
            margin-bottom:10px;
            height:auto;
            article{
                height:45px;
                padding:0  10px;;
                background:#fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom:1px solid #eee;
                font-weight: 500;
                color:#323232;
                font-size:16px;
                .icon{
                    height:12px;
                    width:7px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
        }
    }
</style>
